<template>
  <div class="app-container">
    <vxe-form
      :data="formData"
      @submit="onSearchBtnClick"
      @reset="onSearchBtnClick"
    >
      <vxe-form-item
        field="formId"
        :item-render="{
          name: 'select',
          events: { change: onChangeBtnClick },
          options: forms,
          optionProps: { value: 'id', label: 'name' },
        }"
      />
      <vxe-form-item
        v-for="(item, index) in modules"
        :key="index"
        :field="item.field"
        :item-render="{
          name: 'input',
          attrs: { placeholder: '请输入' + item.title },
        }"
      />
      <vxe-form-item
        :item-render="{
          name: '$buttons',
          children: [
            {
              props: {
                type: 'submit',
                content: 'common.select',
                status: 'primary',
              },
            },
            {
              props: { type: 'reset', content: 'common.reset' },
            },
          ],
        }"
      />
    </vxe-form>
    <vxe-toolbar :refresh="{ query: onSearchBtnClick }">
      <template v-slot:buttons>
        <vxe-button
          v-auth="['admin', 'formdata:add']"
          size="medium"
          icon="el-icon-circle-plus-outline"
          status="primary"
          @click="onAddBtnClick"
          >新增</vxe-button
        >
        <vxe-button
          v-auth="['admin', 'formdata:delete']"
          size="medium"
          icon="el-icon-delete"
          status="danger"
          :disabled="!multipleSelection.length"
          @click="onDeleteBtnClick"
          >删除</vxe-button
        >
      </template>
    </vxe-toolbar>
    <vxe-table
      ref="table"
      border
      size="mini"
      :data="tableData"
      @checkbox-all="selectAllEvent"
      @checkbox-change="selectChangeEvent"
      resizable
      align="left"
      show-overflow
      show-header-overflow
    >
      <vxe-table-column
        v-for="(config, index) in tableColumn"
        :key="index"
        v-bind="config"
      />
      <vxe-table-column title="操作" align="center" width="100">
        <template v-slot="{ row }">
          <el-tooltip content="编辑" placement="bottom" effect="light">
            <vxe-button
              v-auth="['admin', 'formdata:update']"
              size="mini"
              icon="el-icon-edit"
              status="primary"
              @click="onEditBtnClick(row)"
            />
          </el-tooltip>
        </template>
      </vxe-table-column>
    </vxe-table>
    <Form v-if="detail" v-model="detail" />
    <vxe-pager
      :current-page.sync="formData.currentPage"
      :page-size.sync="formData.pageSize"
      :total="total"
      :page-sizes="[10, 20, 100, 200]"
      :layouts="[
        'PrevJump',
        'PrevPage',
        'Number',
        'NextPage',
        'NextJump',
        'Sizes',
        'FullJump',
        'Total',
      ]"
      @page-change="handlePageChange"
    />
  </div>
</template>
<script>
import { formdatas, del } from '@/api/formdata'
import { treeForm, getFeild, getFeildCondition } from '@/api/form'
import Form from './form'
export default {
  components: {
    Form
  },
  data() {
    return {
      loading: false,
      formData: {
        currentPage: 1,
        pageSize: 10
      },
      modules: [],
      tableData: [],
      multipleSelection: [],
      detail: null,
      total: 0,
      data: [],
      checked: [],
      forms: [],
      confId: '',
      tableColumn: [
        { type: 'checkbox', width: 50, fixed: null },
        { field: 'name', title: '名称' },
        { field: 'stock', title: '数量' },
        { field: 'createTime', title: '创建时间' },
        { field: 'updateTime', title: '更新时间' }
      ],
      tableColumns: [
        { type: 'checkbox', width: 50, fixed: null },
        { field: 'name', title: '名称' },
        { field: 'stock', title: '数量' },
        { field: 'createTime', title: '创建时间' },
        { field: 'updateTime', title: '更新时间' }
      ]
    }
  },
  created() {
    this.onSearchBtnClick()
    this.listForms()
  },
  methods: {
    selectAllEvent({ records }) {
      this.multipleSelection = records
    },
    selectChangeEvent({ records }) {
      this.multipleSelection = records
    },
    onAddBtnClick() {
      this.detail = { confId: this.confId }
    },
    onEditBtnClick(row) {
      row.confId = this.confId
      this.detail = row
    },
    onDeleteBtnClick() {
      this.$confirm('确定删除该数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => this.deleteData())
    },
    async deleteData() {
      const selectRecords = this.$refs.table.getCheckboxRecords()
      await del(selectRecords.map((item) => item.id))
      this.$notify({
        type: 'success',
        message: '删除成功!'
      })
      this.onSearchBtnClick()
    },
    onSearchBtnClick() {
      this.loading = true
      if (this.formData.formId) {
        this.listField(this.formData.formId)
      }
      formdatas(this.formData).then((data) => {
        this.tableData = data.list
        this.total = data.total
        this.loading = false
      })
    },
    handlePageChange({ currentPage, pageSize }) {
      this.formData.currentPage = currentPage
      this.formData.pageSize = pageSize
      this.onSearchBtnClick()
    },
    listForms() {
      treeForm(0).then((res) => {
        this.forms = res
        // this.confId = res[0].id
        // this.listField(res[0].id)
        // this.formData.formId = this.confId
        // this.onSearchBtnClick()
      })
    },
    listField(id) {
      getFeild(id).then((res) => {
        this.tableColumn = this.tableColumns.concat(res)
      })
    },
    onChangeBtnClick({ data }) {
      this.onSearchBtnClick()
      getFeildCondition(data.formId).then((res) => {
        this.formData = { currentPage: 1, pageSize: 10, formId: data.formId }
        this.modules = res
      })
    }
  }
}
</script>
